<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>

	<style>
		span.contents {
			position: relative;
			color: firebrick;
			margin:3px
		}

		span.contents:before {
			content: attr(text);
			position: absolute;
			z-index: 10;
			color: coral;
			-webkit-mask: linear-gradient(to left, red, transparent);
		}
	</style>


	<body>
		<button-counter></button-counter>
		<div id="apps">
			<span class="word" v-for="(letter,index) in words" :key="index">
				<span class="contents" :text="letter">{{letter}}</span>
			</span>
		</div>
	</body>
	<script>

		var vm = new Vue({
			el: "#apps",
			data: {
				words: [], //字母数组push，pop的载体
				str: "可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。", //str初始化
				letters: [], //str分解后的字母数组
				brcount:0,//换行符的个数
				maxLen:12
			},
			methods: {
				end() { //停止定时器
					clearInterval(this.intivend)
					this.intivend = null //每当清除了定时器之后，需要重新把intivend变为null
				},
				//开始输入的效果动画
				begin() {
					let str = this.str || this.message[this.message.length - 1];
					let that = this;
					this.letters = str.split("");
					let arr = str.split("");

					for (var i = 0; i < this.letters.length; i++) {
						let ind = i;
						setTimeout(function(i) {
							that.words.push(arr[ind])
						}, 100 * i);
					}
				},
			},
			watch: { //监听order值的变化，改变str的内容
				// order(old, newV) {
				// 	this.str = this.message[this.order || 0];
				// }
				words(){
					this.brCount=Math.round(this.words.length/this.maxLen)
				}
			},
			mounted() { //页面初次加载后调用begin()开始动画
				this.begin();
			},
		})
	</script>
</html>
